<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<title>轮播图</title>
	<link href=statics/css/bootstrap.min.css rel="stylesheet">
</head>
<body>
   
   <!--导航-->
   <nav class="navbar navbar-default" role="navigation">
		<div class="container">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">菜鸟教程</a>
		</div>
		<div>
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">iOS</a></li>
				<li><a href="#">SVN</a></li>
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						Java
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">jmeter</a></li>
						<li><a href="#">EJB</a></li>
						<li><a href="#">Jasper Report</a></li>
						<li class="divider"></li>
						<li><a href="#">分离的链接</a></li>
						<li class="divider"></li>
						<li><a href="#">另一个分离的链接</a></li>
					</ul>
				</li>
			</ul>
		</div>
		</div>
	</nav>

 
    <!--网格系统-->
    <div class="container" style="padding-left:0px;padding-right:0px">
    	<div class="row">
    		<div id="myCarousel" class="carousel slide" style="width:1180px;overflow:hidden;">
			    <!-- 轮播（Carousel）指标 -->
			    <ol class="carousel-indicators">
			        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			        <li data-target="#myCarousel" data-slide-to="1"></li>
			        <li data-target="#myCarousel" data-slide-to="2"></li>
			    </ol>   
			    <!-- 轮播（Carousel）项目 -->
			    <div class="carousel-inner">
			        <div class="item active">
			           <!--左侧图-->
			          <div style="display:inline-block;vertical-align:top;margin-left:-20px">
			           	<img src="images/3.jpg">
			          </div>

			        <!--中间图-->
			        <div style="display:inline-block;margin-left:-5px">
			           	  <div>
			           	  	<img src="images/5.jpg">
			           	  </div>

			           <div>
			           	  <div style="display:inline-block;">
			           	  	<img src="images/13.jpg">
			           	  </div>
			           	  <div style="display:inline-block;margin-left:-4px">
			           	  	<img src="images/10.jpg">
			           	  </div>
			           </div>
			        </div>

			         <!--右侧图-->
			        <div style="display:inline-block;vertical-align:top;margin-left:-8px">
			         	<img src="images/14.jpg">
			        </div>

		           </div>
			        

			        <div class="item">
			           
		              <!--左侧图-->
			          <div style="display:inline-block;vertical-align:top;margin-left:-20px">
			           	<img src="images/1.jpg">
			          </div>

			        <!--中间图-->
			        <div style="display:inline-block;margin-left:-5px">
			           	  <div>
			           	  	<img src="images/2.jpg">
			           	  </div>

			           <div>
			           	  <div style="display:inline-block;">
			           	  	<img src="images/7.jpg">
			           	  </div>
			           	  <div style="display:inline-block;margin-left:-4px">
			           	  	<img src="images/12.jpg">
			           	  </div>
			           </div>
			        </div>

			         <!--右侧图-->
			        <div style="display:inline-block;vertical-align:top;margin-left:-8px">
			         	<img src="images/9.jpg">
			        </div>

			        </div>




			        <div class="item">
		            
		                    <!--左侧图-->
			          <div style="display:inline-block;vertical-align:top;margin-left:-20px">
			           	<img src="images/1.jpg">
			          </div>

			        <!--中间图-->
			        <div style="display:inline-block;margin-left:-5px">
			           	  <div>
			           	  	<img src="images/11.jpg">
			           	  </div>

			           <div>
			           	  <div style="display:inline-block;">
			           	  	<img src="images/8.jpg">
			           	  </div>
			           	  <div style="display:inline-block;margin-left:-4px">
			           	  	<img src="images/15.jpg">
			           	  </div>
			           </div>
			        </div>

			         <!--右侧图-->
			        <div style="display:inline-block;vertical-align:top;margin-left:-8px">
			         	<img src="images/6.jpg">
			        </div>


			
			        </div>
			    </div>
			    <!-- 轮播（Carousel）导航 -->
			    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			        <span class="sr-only">Previous</span>
			    </a>
			    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			        <span class="sr-only">Next</span>
			    </a>
			</div>
    	</div>


    	<div class="row">
    		<div class="col-md-10" style="padding-left:-20px">
    			<!--面板-->
    			<div class="panel panel-default">
					<div class="panel-heading">
						不带 title 的面板标题
					</div>
					<div class="panel-body">
						面板内容
					</div>
				</div>

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							带有 title 的面板标题
						</h3>
					</div>
					<div class="panel-body">
						面板内容
					</div>
				</div>
    	</div>
    	<div class="col-md-2" style="padding-right:-20px">
    			<!--面板-->
    			<div class="panel panel-default">
					<div class="panel-heading">
						不带 title 的面板标题
					</div>
					<div class="panel-body">
						面板内容
					</div>
				</div>

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">
							带有 title 的面板
						</h3>
					</div>
					<div class="panel-body">
						面板内容
					</div>
				</div>
    	</div>
    </div>
    </div>



    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="statics/js/jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="statics/js/bootstrap.min.js"></script>
    <script>
    	
    </script>

</body>
</html>